<template>
  <div class="conic">
            <div class="nav">
          <ul class="clearfloat">
            <li class="active"><a href="">首页</a></li>
            <li><a href="tmc1.html">产品中心</a></li>
            <li><a href="solve.html">解决方案 </a></li>
            <li><a href="case.html">应用案例</a></li>
            <li><a href="agent.html">招商代理</a></li>
            <li><a @click="soundBox()">音乐盒</a></li>
          </ul>
        </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {},
  watch: {},
  computed: {},
  filters: {},
  components: {},
  created() {},
  mounted() {},
  methods: {},
};
</script>
<style scoped lang="scss">
// body {
//     display: flex;
//     justify-content: center;
//     align-items: center;
//     height: 100vh;
//     background: #000;
// }

// *, *::before, *::after {
//     box-sizing: border-box;
// }

@keyframes rotate {
    100% {
        transform: rotate(1turn);
    }
}

.conic {
    position: relative;
    z-index: 0;
    width: 400px;
    height: 300px;
    margin: 20px;
    border-radius: 10px;
    overflow: hidden;
    padding: 2rem;
    
    &::before {
        content: '';
        position: absolute;
        z-index: -2;
        left: -50%;
        top: -50%;
        width: 200%;
        height: 200%;
        background-color: #1a232a;
        background-repeat: no-repeat;
        background-position: 0 0;
        background-image: conic-gradient(transparent, rgba(168, 239, 255, 1), transparent 30%);
        animation: rotate 4s linear infinite;
    }
    
    &::after {
        content: '';
        position: absolute;
        z-index: -1;
        left: 6px;
        top: 6px;
        width: calc(100% - 12px);
        height: calc(100% - 12px);
        background: #000;
        border-radius: 5px;
    }
}
</style>